<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP32配置页面</title>
    <style>
        :root {
            --primary-color: #4CAF50;
            --hover-color: #45a049;
            --border-color: #ddd;
        }
        
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 20px;
            margin-bottom: 20px;
        }

        .section {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }

        h2 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }

        h3 {
            color: var(--primary-color);
            margin-top: 0;
            padding-bottom: 10px;
            border-bottom: 2px solid var(--primary-color);
        }

        .form-group {
            margin-bottom: 15px;
        }

        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
            color: #555;
        }

        input[type="text"],
        input[type="password"],
        input[type="number"] {
            width: 100%;
            padding: 10px;
            border: 1px solid var(--border-color);
            border-radius: 4px;
            box-sizing: border-box;
            transition: border-color 0.3s;
        }

        input:focus {
            outline: none;
            border-color: var(--primary-color);
            box-shadow: 0 0 5px rgba(76, 175, 80, 0.2);
        }

        input[readonly] {
            background-color: #f5f5f5;
            cursor: not-allowed;
        }

        .pin-group {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
            gap: 15px;
        }

        button {
            display: block;
            width: 100%;
            max-width: 200px;
            margin: 30px auto 0;
            background-color: var(--primary-color);
            color: white;
            padding: 12px 20px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            transition: background-color 0.3s;
        }

        button:hover {
            background-color: var(--hover-color);
        }

        @media (max-width: 768px) {
            .container {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <h2>ESP32设备配置</h2>
    <form action="/modify" method="get">
        <div class="container">
            <div class="section">
                <h3>设备信息</h3>
                <div class="form-group">
                    <label for="deviceId">设备ID:</label>
                    <input type="text" id="deviceId" name="DeviceID" value="{DeviceID}" readonly title="设备ID" placeholder="设备ID">
                </div>
                <div class="form-group">
                    <label for="softVersion">软件版本:</label>
                    <input type="text" id="softVersion" name="SoftVersion" value="{SoftVersion}" readonly title="软件版本" placeholder="软件版本">
                </div>
            </div>

            <div class="section">
                <h3>WiFi配置</h3>
                <div class="form-group">
                    <label for="wifiSSID">WiFi名称:</label>
                    <input type="text" id="wifiSSID" name="WifiSSID" value="{WifiSSID}" required title="WiFi名称" placeholder="请输入WiFi名称">
                </div>
                <div class="form-group">
                    <label for="wifiPassword">WiFi密码:</label>
                    <input type="password" id="wifiPassword" name="WifiPassword" value="{WifiPassword}" required title="WiFi密码" placeholder="请输入WiFi密码">
                </div>
            </div>

            <div class="section">
                <h3>MQTT配置</h3>
                <div class="form-group">
                    <label for="mqttIP">MQTT服务器地址:</label>
                    <input type="text" id="mqttIP" name="MqttIP" value="{MqttIP}" required title="MQTT服务器地址" placeholder="请输入MQTT服务器地址">
                </div>
                <div class="form-group">
                    <label for="mqttPort">MQTT端口:</label>
                    <input type="text" id="mqttPort" name="MqttPort" value="1883" readonly title="MQTT端口" placeholder="MQTT端口">
                </div>
            </div>

            <div class="section">
                <h3>引脚配置</h3>
                <div class="pin-group">
                    <div class="form-group">
                        <label for="pinSCL">SCL引脚:</label>
                        <input type="number" id="pinSCL" name="PinSCL" value="{PinSCL}" min="0" max="40" required title="SCL引脚" placeholder="SCL引脚">
                    </div>
                    <div class="form-group">
                        <label for="pinSDA">SDA引脚:</label>
                        <input type="number" id="pinSDA" name="PinSDA" value="{PinSDA}" min="0" max="40" required title="SDA引脚" placeholder="SDA引脚">
                    </div>
                    <div class="form-group">
                        <label for="pinPTZHead">云台头部引脚:</label>
                        <input type="number" id="pinPTZHead" name="PinPTZHead" value="{PinPTZHead}" min="0" max="40" required title="云台头部引脚" placeholder="云台头部引脚">
                    </div>
                    <div class="form-group">
                        <label for="pinPTZBody">云台身体引脚:</label>
                        <input type="number" id="pinPTZBody" name="PinPTZBody" value="{PinPTZBody}" min="0" max="40" required title="云台身体引脚" placeholder="云台身体引脚">
                    </div>
                    <div class="form-group">
                        <label for="pinLED">LED引脚:</label>
                        <input type="number" id="pinLED" name="PinLED" value="{PinLED}" min="0" max="40" required title="LED引脚" placeholder="LED引脚">
                    </div>
                </div>
            </div>
        </div>

        <button type="submit">保存配置</button>
    </form>
</body>
</html>